<template>
	<view class="detail">
    <div class="banner-box">
      <u-image mode="widthFix" :src="detail.url"></u-image>
    </div>
    <div class="content">
      <div class="card">
        <div class="title">{{ detail.name }}</div>
        <div class="box">
          <div class="item border">
            <div class="text">{{ detail.voteList.length }}</div>
            <div class="text">累计票数</div>
          </div>
          <div class="item">
            <div class="text">{{ detail.rank }}</div>
            <div class="text">排名</div>
          </div>
          <div class="item border">
            <div class="text">{{ detail.prev }}</div>
            <div class="text">距离上一名</div>
          </div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        bannerList: [],
        detail: {
          voteList: []
        }
			}
		},
    onLoad({ id }) {
      this.$api.groupList().then(res => {
        let list = res.map(item => {
          return {
            ...item,
            vote: item.voteList.length
          }
        })
        let detail = list.find(item => item.id == id)
        this.bannerList = [
          {
            image: detail.url
          }
        ]
        // 判断当前对象在总对象中的排名
        let index = list.sort((a, b) => b.vote - a.vote).findIndex(item => item.id == id)
         detail.rank = index + 1
        console.log('rank',index)
        // 距离上一名的票数
        let prev = list[index - 1]
        console.log('detail',detail)
        console.log('prev',prev)
        detail.prev = prev ? prev.vote - detail.vote : 0
        this.detail = detail
      })
    },
		methods: {

		}
	}
</script>

<style lang="scss">
.detail {
  height: 100%;
  padding-bottom: 100rpx;
  background-image: url("/static/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  .button {
    width: 90%;
    margin: 0 auto;
    margin-top: 32rpx;
    background-color: rgba(51,109,244, 1);
    color: #ffffff;
    border-radius: 8rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
  }
  .card {
    padding: 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    .rule-item {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      .rule-icon {
        flex-shrink: 0;
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }
      .rule-label {
        font-size: 28rpx;
        flex-shrink: 0;
      }
      .rule-name {
        font-size: 28rpx;
        color: #666666;
      }
    }
    .rule-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: rgba(51,109,244,1);
      margin-bottom: 20rpx;
      .rule-line {
        width: 48rpx;
        height: 1px;
        background-color: rgba(51,109,244, 0.6);
        margin: 0 20rpx;
      }
    }
    .title {
      font-size: 32rpx;
      color: #000000;
      line-height: 36rpx;
      margin-bottom: 40rpx;
      text-align: center;
      margin-top: 20rpx;
    }
    .box {
      display: flex;
      justify-content: space-between;
      background-color: rgb(112, 76, 237);
      padding: 40rpx 0;
      border-radius: 8rpx;
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        .text {
          font-size: 32rpx;
          text-align: center;
          font-weight: 400;
          line-height: 40rpx;
        }
        padding: 0 12rpx;
        &.border {
          border-left: 1px solid rgba(255,255,255,0.5);
          border-right: 1px solid rgba(255,255,255,0.5);
        }
      }
    }
  }
  .banner-box {
    width: 100%;
    overflow: hidden;
    padding: 24rpx;
    padding-bottom: 0;
  }
  .content {
    padding: 32rpx;

    .list-item {
      border-radius: 12rpx;
      background-color: #ffffff;
      overflow: hidden;
      padding: 12px;
      margin-bottom: 24rpx;
      .vote-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        .vote-name {
          font-size: 24rpx;
        }
      }
      .vote_number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        line-height: 34px;
        color: #333333;
        .vote_number_text2 {
          color: rgba(51,109,244,1);
        }
      }
      .vote-button-right {
        width: 100%;
        margin-top: 30rpx;
        font-size: 28rpx;
        padding: 12rpx 0;
        background-color: rgba(51,109,244,1);
        border-radius: 12rpx;
        text-align: center;
        color: #ffffff;
      }

      .vote-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: 12rpx auto 0;
        color: #ffffff;
        height: 40rpx;
        text-align: center;
        .vote-button-left {
          flex: 1;
          font-size: 28rpx;
          padding: 10rpx 0;
          background-color: rgba(94, 185, 94, 0.26);
          color: rgba(51,109,244,1);
          margin-right: -40rpx;
          border-bottom-left-radius: 20rpx;
          border-top-left-radius: 20rpx;
        }
      }
      .list-icon {
        height: 220rpx;
        width: 100%;
      }
      .list-text {
        padding:0 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        .list-title {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 14rpx;
          text-align: center;
        }
        .list-desc {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 14rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

</style>
